<!-- 积分活动模板 -->
<template>
  <view class="container uno-w-[100%] " @click="tagHandler">
    <view class="uno-w-[100%]">
      <up-image class="cateImage" :show-loading="true" :src="modelValue.picUrl" width="100%"
                :height="height"></up-image>
    </view>
    <view class="middle uno-p2 uno-border-rd">
      <up-text :text="modelValue.name" bold lines="1"></up-text>


      <view class="priceBox uno-flex-col uno-flex">
        <text class="second">{{ modelValue.points || '' }}积分</text>
        <text class="first">+{{ modelValue.price || '' }}元</text>

      </view>

      <view class="bottom">
        <text class="second">兑换热度{{ modelValue.heat ? (modelValue.heat / 10000).toFixed(1) : '10' }}万+</text>
      </view>
      <!--      <up-text :block="false" :text="modelValue.price||''"></up-text>+ <up-text :block="false" :text="modelValue.useCredits||''"></up-text>-->
    </view>
  </view>
</template>
<script setup>
  import sheep from '@/sheep';
  import { computed, reactive } from 'vue';

  const props = defineProps({
    modelValue: {
      type: Object,
      default() {
      },
    },
    show: {
      type: Boolean,
      default: false,
    },
    height: {
      type: String,
      default: '220rpx',
    },
  });
  const emit = defineEmits(['click']);

  function tagHandler() {
    emit('click', props.modelValue);
  }

</script>
<style lang="scss" scoped>
  .container {
    .middle {
      height: 170rpx;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      box-shadow: 0 2rpx 5rpx 0 rgba(0,0,0,.1) ;

      .priceBox {
        color: #f80519;

        .second {
          font-size: 30rpx;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;

        .first {
          text-decoration: line-through;
          font-size: 25rpx;
        }

        .second {
          font-size: 20rpx;
        }
      }
    }

    .cateImage {
      :deep(.u-image) {
        .u-image__image {
          border-radius: 20rpx !important;

        }
      }
    }
  }
</style>
